<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>商品列表</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="/css/font.css">
        <link rel="stylesheet" href="/css/index.css">
        <script src="/lay/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="/js/index.js"></script>
        <style type="text/css">
        #tj1 a{
        color:white
        }
        #lp a{
        color:white
        }
        </style>
    </head>
    <body>
        <div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="/">首页</a>
            <a href="#">列表页</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
          <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body ">

						<div class="layui-inline layui-show-xs-block">
							<input type="text" name="productName" id="productName"  placeholder="请输入文章标题" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-inline layui-show-xs-block">
							<button class="layui-btn" id="cha"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
						</div>

					</div>
					<div class="layui-card-header">
						<button class="layui-btn layui-btn-danger" onclick="delAll()">
							<i class="layui-icon"></i>批量删除
						</button>
						<button class="layui-btn" onclick="xadmin.open('添加用户','/padd',400,300)"><i class="layui-icon"></i>添加</button>
					</div>
					<div class="layui-card-body layui-table-body layui-table-main">
						<table class="layui-table layui-form">
							<thead>
								<tr>
									<th><input type="checkbox" lay-filter="checkall" name=""
										lay-skin="primary"></th>
									<th>ID</th>
									<th>名字</th>
									<th>存量</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
							<!--数据显示部分-->

							</tbody>
						</table>
					</div>
					<!--分页部分-->
					<div id="jg" class="layui-card-body "></div>
				</div>
			</div>
                </div>
            </div>
        </div> 
    </body>
      <script src="/js/jquery-1.12.4.js"></script>

	<script type="text/javascript">

		layui.use(['laydate','form'], function(){
			var laydate = layui.laydate;
			var  form = layui.form;


			// 监听全选
			form.on('checkbox(checkall)', function(data){

				if(data.elem.checked){
					$('tbody input').prop('checked',true);
				}else{
					$('tbody input').prop('checked',false);
				}
				form.render('checkbox');
			});

			//执行一个laydate实例
			laydate.render({
				elem: '#start' //指定元素
			});

			//执行一个laydate实例
			laydate.render({
				elem: '#end' //指定元素
			});


		});


		/*用户-删除*/
		function member_del(obj, id) {
			layer.confirm('确认要删除吗？', function(index) {
				//发异步删除数据
				$.ajax({
					url : "/product/del",
					type : "GET",
					data : {
						"id" : id
					},
					dataType : "json",
					success : function(msg) {
						if(msg.flag) {
							$(obj).parents("tr").remove();
							layer.msg('已删除!', {
								icon: 1,
								time: 1000
							});
						}
					},
					error : function() {
						//alert("请求失败，请与客服联系");
					}

				});
			});
		}

	$(function(){
		//显示数据
		showData();
		//显示页码
		showPage();
	})
	let pageNum = 1;//设置首页页码
	let pageSize = 5;//设置每页显示的条数
	let totalCount;//总条数
	let totalPage;//总共多少页
	//显示数据
	function showData(){
		let productName = $("#productName").val();
		$.ajax({
			"url":"/testPageHelper1",
			"type":"get",
			"async":false,
			"data":{"currentPage":pageNum,"pageSize":pageSize,"productName":productName},
			"dataType":"json",
			"success":function(res){
				//$("#list").html(res);
				totalCount = res.total;//总记录数
				totalPage = res.pages;//总页数
				let list = res.list;//每页显示的列表
				let html='';
				for(let i=0;i<list.length;i++){
					html+='<tr>';
					html+='"<td><input type="checkbox" name="id"  value="'+list[i].id +'  lay-skin="primary">';
					html+='</td>';
					html+='<td>'+list[i].id;
					html+='</td>';
					html+='<td>'+list[i].productName;
					html+='</td>';
					html+='<td>'+list[i].quantity;
					html+='</td>';
					html+='<td class="td-manage">';
					html+='<a title="编辑" onclick="xadmin.open(\'编辑\',\'/edit.html?a=1&id='+list[i].id+'\')"';
					html+='href="javascript:;"> <i class="layui-icon">&#xe642;</i>';
					html+='</a> <a title="删除" onclick="member_del(this,'+list[i].id+')"';
					html+='href="javascript:;"> <i class="layui-icon">&#xe640;</i>';
					html+='</a></td>';
					html+='<tr>';
					
				}
				$("tbody").empty().append(html);
			},
			"error":function(){
				alert("请求失败");
			}
		});
	}
	
	//显示页码
	function showPage(){
		layui.use(['laypage'],function(){
			 var laypage = layui.laypage;
		     laypage.render({
		         elem:'jg'
		         ,count:totalCount   //总数量
		         ,curr:pageNum   //当前页码
		         ,limit:pageSize   //页面尺寸
		         ,layout: ['prev', 'page', 'next', 'skip','count','limit']
		         ,jump:function (obj,first) {
		        	pageNum = obj.curr;
		        	pageSize = obj.limit;
		        	//首次不执行，一定要加此判断，否则初使时会无限刷新
		           if(!first){
		        	   showData();
		           }
		         }
		      })
		});

	}


		$("#cha").click(function() {
			showData();
		});
	
	



		
	</script>
</html>